$(function () {
    $('.banner img').on('click', function () {
        $('.music img').prop('src', $(this).prop('src'))
        $('audio').prop('src', $(this).attr('musicsrc'))
        $('.music h3').text($(this).prop('title'))
        $('body').css('background', 'rgba(0, 0, 0, 0) url(' + $(this).attr('bgsrc') + ') no-repeat scroll 0% 0% / cover padding-box border-box')
        $('audio').prop('autoplay', true)
        $('audio')[0].play()
        $('.music span:nth-of-type(2)').removeClass('icon-play3').addClass('icon-pause2').prop('title', '暂停')
        var index = Number($('audio').prop('src').substr(-5, 1))
        $('.banner img').css('animation', '')
        $(this).css('animation', 'imagesRotate 3s linear 0s infinite forwards')
        // if ($('.music span:nth-of-type(2)').hasClass('icon-pause2')) {
        //     $('.banner img').css('animation', '')
        //     $(this).css('animation', 'imagesRotate 3s linear 0s infinite forwards')
        // }
    })

    $('.music>div').on('click', function () {
        if ($(this).parent().offset().left === 0) {
            $(this).parent().css('animation', 'musicMoveIn 0.75s ease 0s 1 forwards')
            $(this).children('div').removeClass('outer').addClass('inner')
        } else {
            $(this).parent().css('animation', 'musicMoveOut 0.75s ease 0s 1 forwards')
            $(this).children('div').removeClass('inner').addClass('outer')
        }
    })

    $('.music span:nth-of-type(1)').on('click', function () {
        var src = $('audio').prop('src')
        var index = Number(src.substr(-5, 1))
        $('.banner img').eq(index - 2).click()
    })

    $('.music span:nth-of-type(2)').on('click', function () {
        //jquery不在箭头函数中使用$(this)
        if ($('audio')[0].paused) {
            $('audio').prop('autoplay', true)
            $('audio')[0].play()
            $(this).removeClass('icon-play3').addClass('icon-pause2').prop('title', '暂停')
            var index = Number($('audio').prop('src').substr(-5, 1))
            $('.banner img').eq(index - 1).css('animation', 'imagesRotate 3s linear 0s infinite forwards')
        } else {
            $('audio').prop('autoplay', false)
            $('audio')[0].pause()
            $(this).removeClass('icon-pause2').addClass('icon-play3').prop('title', '播放')
            $('.banner img').css('animation', '')
        }
    })

    $('.music span:nth-of-type(3)').on('click', function () {
        var src = $('audio').prop('src')
        var index = Number(src.substr(-5, 1))
        if (index === 5) { index = 0 }
        $('.banner img').eq(index).click()

    })
})